<template>
  <div class="strategy_sidebar" >
    <div class="drawer" :class="isShow ? 'show' : 'hidden'">
      <div class="drawer_r">
        <div class="ico_open"  @click="getPop()" v-show="!isShow"></div>
        <div class="ico_close"  @click="getPop()"v-show="isShow"></div>
      </div>
      <div class="drawer_l">
        <div class="drawer_l_h">
          <div class="drawer_db">
            <Button @click="stop_modall =true" v-if="run_select_Ids.length===0" :disabled="!run_status">全部停止</Button>
            <Button @click="select_stop_modall = true" v-else :disabled="!run_status">选中停止</Button>
            <Button @click="end_modall =true"  v-if="run_select_Ids.length===0" :disabled="!run_status">全部平仓</Button>
            <Button @click="end_modall =true" v-else :disabled="!run_status">选中平仓</Button>
          </div>
          <div class="drawer_db">
            <Button @click="edit_translation_modall = true;edit_translation_modall_title='一键编辑'" :disabled="(run_status && run_select_Ids.length===0) || (!run_status && unrun_select_Ids.length===0)">一键编辑</Button>
            <Button @click="translation_modall = true;translation_modall_title='全部平移'" :disabled="!run_status" v-if="run_select_Ids.length===0">全部平移</Button>
            <Button  @click="translation_modall = true;translation_modall_title='选中平移'" :disabled="!run_status" v-else>选中平移</Button>
          </div>
        </div>
        <div class="drawer_l_m">
          <div id="strategy_draw" style="width: 100%;height: 100%;"></div>
        </div>
      </div>
    </div>
    <div class="sticky_modal">
      <Modal
        v-model="stop_modall"
        :title="stop_modall_title"
        :mask-closable = "false"
        @on-ok ="stopAll"
        @on-cancel ="stop_cancel"
        :loading ='true'
        width="440">
        <div>
          <Form>
            <FormItem label="停止方向" :label-width="100" style="margin-bottom: 10px;" v-if="run_select_Ids.length===0">
              <Select v-model="stop_command">
                <Option value="全部策略停止">全部</Option>
                <Option value="多单策略停止">多单</Option>
                <Option value="空单策略停止">空单</Option>
              </Select>
            </FormItem>
          </Form>
        </div><!--注册界面组件-->
      </Modal>
      <Modal
        v-model="select_stop_modall"
        ok-text="确定"
        cancel-text="取消"
        :mask-closable = "false"
        :loading ='true'
        @on-ok="stopAll"
      >
        <p>确认要停止策略吗？</p>
      </Modal>
      <Modal
        v-model="end_modall"
        :title="end_modall_title"
        @on-ok ="endAll"
        @on-cancel ="end_cancel"
        :mask-closable = "false"
        :loading ='true'
        width="440">
        <div>
          <Form>
            <FormItem label="平仓方向" :label-width="100" style="margin-bottom: 10px;" v-if="run_select_Ids.length===0">
              <Select v-model="end.command">
                <Option value="全部策略平仓">全部</Option>
                <Option value="多单策略平仓">多单</Option>
                <Option value="空单策略平仓">空单</Option>
              </Select>
            </FormItem>
            <FormItem label="平仓方式" :label-width="100" style="margin-bottom: 10px;">
              <Select v-model="end.maker_or_taker">
                <Option value="被动">被动</Option>
                <Option value="主动">主动</Option>
              </Select>
            </FormItem>
          </Form>
        </div><!--注册界面组件-->
      </Modal>
      <Modal
        v-model="translation_modall"
        :title="translation_modall_title"
        :mask-closable = "false"
        @on-ok ="translation_queren"
        @on-cancel ="translation_cancel"
        :loading ='true'
        width="440">
        <div>
          <Form>
            <FormItem label="平移方式" :label-width="100" style="margin-bottom: 10px;" v-if="run_select_Ids.length===0">
              <Select v-model="translation.command">
                <Option value="多已持仓">多已持仓</Option>
                <Option value="多未持仓">多未持仓</Option>
                <Option value="空已持仓">空已持仓</Option>
                <Option value="空未持仓">空未持仓</Option>
                <Option value="多单平移">多单</Option>
                <Option value="空单平移">空单</Option>
                <Option value="全部平移">全部</Option>
              </Select>
            </FormItem>
            <FormItem label="平移点数" :label-width="100" style="margin-bottom: 10px;" >
              <Input  v-model="translation.point"  :precision=1>
              <span slot="append"  style="width: 80px" >点</span>
              </Input >
            </FormItem>
          </Form>
        </div><!--注册界面组件-->
      </Modal>
      <Modal
        v-model="edit_translation_modall"
        :title="edit_translation_modall_title"
        :mask-closable = "false"
        @on-ok ="batch_update_strategy"
        @on-cancel ="batch_strategy_cancel"
        :loading ='true'
        width="440">
        <div>
          <Form>
            <FormItem label="策略组别" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Input v-model="batch_edit_strategy.group_id"  >
                  </Input>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="循环次数" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Input v-model="batch_edit_strategy.stop_amount_cycle"  >
                  <span slot="append"  style="width: 80px" >次</span>
                  </Input>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="止损价格" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Input v-model="batch_edit_strategy.stop_loss"  >
                  <span slot="append"  style="width: 80px" >USD</span>
                  </Input>
                </Col>
                <Col span="4" offset="1">
                  <Button @click="batch_edit_strategy.stop_loss = 'None'">置空</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="止损平仓方式" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_loss_type" >
                    <Option value="被动">被动</Option>
                    <Option value="主动">主动</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="止损价格类型" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_loss_price_type" >
                    <Option value="市价">市价</Option>
                    <Option value="指数价">指数价</Option>
                    <Option value="EMA">EMA</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <Divider :dashed="true"/>
            <FormItem label="止盈价格" :label-width="100" style="margin-bottom: 10px;"  >
              <Row>
                <Col span="18">
                  <Input v-model="batch_edit_strategy.stop_profit"  >
                  <span slot="append"  style="width: 80px" >USD</span>
                  </Input>
                </Col>
                <Col span="4" offset="1">
                  <Button @click="batch_edit_strategy.stop_profit = 'None'">置空</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="止盈平仓方式" :label-width="100" style="margin-bottom: 10px;" disabled="true">
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_profit_type" >
                    <Option value="被动">被动</Option>
                    <Option value="主动">主动</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="止盈价格类型" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_profit_price_type" >
                    <Option value="市价">市价</Option>
                    <Option value="指数价">指数价</Option>
                    <Option value="EMA">EMA</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <Divider :dashed="true"/>
            <FormItem label="触发时间平仓" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_time_type" >
                    <Option value="被动">被动</Option>
                    <Option value="主动">主动</Option>
                  </Select>
                </Col>
              </Row>

            </FormItem>
            <FormItem label="终止类型" :label-width="100" style="margin-bottom: 10px;" >
              <Row>
                <Col span="18">
                  <Select v-model="batch_edit_strategy.stop_time_time_or_len" >
                    <Option value="len">运行时长</Option>
                    <Option value="time">终止时间</Option>
                    <Option value="None">无限时长</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="运行时长" :label-width="100" style="margin-bottom: 10px;" v-if="batch_edit_strategy.stop_time_time_or_len === 'len'">
              <Row>
                <Col span="18">
                  <Input v-model="batch_edit_strategy.stop_time_len" >
                  <span slot="append"  style="width: 80px">小时</span>
                  </Input>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="终止时间" :label-width="100" style="margin-bottom: 10px;" v-if="batch_edit_strategy.stop_time_time_or_len === 'time'">
              <Row>
                <Col span="18">
                  <DatePicker  type="datetime"  v-model="batch_edit_strategy.stop_time" ></DatePicker >
                </Col>
              </Row>
            </FormItem>
          </Form>
        </div><!--注册界面组件-->
      </Modal>
      <Modal
        v-model="translation_modall2"
        ok-text="确定"
        cancel-text="取消"
        :loading ='true'
        @on-ok="translation_save()">
        <p>当前平移为【{{translation.point}}】，已经超过1000点确定平移吗？</p>
      </Modal>
    </div>
  </div>
</template>

<script>
  import {
    stopAll,
    endAll,
    translationAll,
    updateStrategyBatch,
    distributionEntrust3,
  } from '@/api/trade'
  import {
    TimeToDate,
    isNumberAndNone,
    isNumberAndPositive,
    isPositiveInteger,
  } from '@/libs/tools'
  import { mapGetters,mapMutations,mapActions } from 'vuex'
  import echarts from 'echarts'
  var myChart = '';
    export default {
      name: "strategy_sidebar",
      data(){
        return{
          clientSelected: '',
          contractSelected: '',
          isShow: false,
          strategy_data:'',
          stop_modall:false,
          select_stop_modall:false,
          end_modall:false,
          stop_modall_title:'策略停止',
          end_modall_title:'全部平仓',
          stop_command:'全部策略停止',
          end:{
            command:'全部策略平仓',
            maker_or_taker:'被动',
          },
          run_select_Ids:[],//选中的id
          translation_modall:false,
          translation_modall_title:'全部平移',
          translation_modall2:false,
          translation:{
            command:'',
            point:0,
          },
          edit_translation_modall:false,
          edit_translation_modall_title:'选中编辑',
          batch_edit_strategy:{
            stop_amount_cycle:'',
            stop_len:'',
            stop_loss:'',
            stop_loss_type:'',
            stop_loss_price_type:'',
            stop_profit:'',
            stop_profit_type:'',
            stop_profit_price_type:'',
            stop_time:'',
            stop_time_len:'',
            stop_time_time_or_len:'',
            stop_time_type:'',
            strategy_status:'',
            strategy_type:'',
            volume:'',
            group_id:'',
          }, //批量编辑
          run_status:true,
          unrun_select_Ids:[],
        }
      },
      methods: {
        ...mapGetters([
          'get_client',
          'get_contract',
          'get_run_select_Ids',
          'get_unrun_select_Ids',
          'get_run_status',
          'get_strategy_data',
        ]),
        ...mapMutations([
          'set_run_select_Ids',
          'set_data_group_id_run',
          'set_unrun_select_Ids',
        ]),
        ...mapActions([
          'getListStrategypro',
          'getDistributionEntrustPro',
          'stopDistributionEntrust',
        ]),
        getPop() {
          this.isShow = !this.isShow;
          if(this.isShow){
            this.get_distributionEntrust();
          }else {
            this.stopDistributionEntrust();
          }
        },
        //画图
        draw(id,strategy_data) {
          let option =  {
            backgroundColor: '#1B2039',
            title: {
              text: '',
              subtext: ''
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
              formatter : function (params) {
                if(params[0].value !== 0 ){
                  var result = '';
                  result += "策略ID:"+params[0].data.data.strategy_id +",委托价格:"+ params[0].axisValueLabel +",数量:" + params[0].value
                  return result;
                }else {
                  return ;
                }
              }
            },
            grid: {
              top: '2%',
              left: '3%',
              right: '3%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.1],
              data:[],
              axisLabel: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              }
            },
            yAxis: {
              type: 'category',
              axisLine: {
                show: false,
                onZero:true,
                lineStyle:{
                  color:'#9196A4 ',
                }
              },
              axisTick: {
                show: false
              },
              data:[],
            },
            dataZoom: [
              {
                type: 'inside',
                orient:"vertical",
                start: 0,
                end: 100,
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
              },
            ],
            series: [
              {
                type: 'bar',
                data:[],
                // large: true,
              }
            ]
          };
          for(let i = 0 ; i< strategy_data.length ;i++){
            if(this.run_select_Ids.indexOf(strategy_data[i].strategy_id)>-1){
              option.yAxis.data.push(strategy_data[i].price);
              option.series[0].data.push({
                data:strategy_data[i],
                value:strategy_data[i].value,
                itemStyle: {
                  normal:{
                    color: strategy_data[i].color_selected,
                  },
                  barBorderRadius: [4, 0, 0, 4]
                },
              })
            }else {
              option.yAxis.data.push(strategy_data[i].price);
              option.series[0].data.push({
                data:strategy_data[i],
                value:strategy_data[i].value,
                itemStyle: {
                  normal:{
                    color: strategy_data[i].color_not_selected,
                  },
                  barBorderRadius: [4, 0, 0, 4]
                },
              })
            }
          }
          myChart.clear(option);
          myChart.setOption(option)
        },
        myDraw(){
          this.$nextTick(function() {
            this.draw('strategy_draw',this.strategy_data);
          });
        },
        //策略停止
        stopAll(){
          let params ={
            client:this.clientSelected, //用户ID（用户名）
            contract:this.contractSelected,//合约名称
            command:this.stop_command,
            stop_list:this.run_select_Ids.join(",")
          };
          stopAll(params).then(res=>{
            this.run_select_Ids = [];
            this.stop_modall = false;
            this.select_stop_modall = false;
            if(res.status === 502){
              this.$Message.error("发生502，请核查策略停止");
              return;
            }
            if(res.data.code === 1000){
              this.$Message.success('停止成功');
              this.get_ListStrategy2();
              this.get_distributionEntrust();
            }else {
              this.$Message.error('停止失败');
            }
            this.set_run_select_Ids([]);
            this.set_data_group_id_run([])
          }).catch(res=>{
            this.$Message.error("发生502，请核查策略停止");
            return;
          })
        },
        //关闭策略停止模态框
        stop_cancel(){
          this.stop_command = ''
        },
        //平仓
        endAll(){
          if(this.end.command === undefined){
            this.end.command = ''
          }
          let params ={
            client:this.clientSelected, //用户ID（用户名）
            contract:this.contractSelected,//合约名称
            command:this.end.command,
            maker_or_taker:this.end.maker_or_taker,
            end_list:this.run_select_Ids.join(",")
          };
          endAll(params).then(res=>{
            this.end_modall  = false;
            this.run_select_Ids = [];
            this.set_run_select_Ids([]);
            this.set_data_group_id_run([]);
            if(res.status === 502){
              this.$Message.error("发生502，请核查平仓");
              return;
            }
            if(res.data.code === 1000){
              this.$Message.success('success');
              this.get_ListStrategy2();
              this.get_distributionEntrust();
            }else {
              this.$Message.error('error');
            }
          }).catch((e) =>{
            this.set_run_select_Ids([]);
            this.set_data_group_id_run([])
          })
        },
        //关闭策略停止模态框
        end_cancel(){
          this.end_command = ''
        },
        get_ListStrategy2(){
          let client = this.clientSelected; //用户ID（用户名）
          let contract = this.contractSelected;//合约名称
          this.getListStrategypro({client,contract}).then(res =>{
            console.log(res);
          }).catch(err =>{
            console.log(err)
          })
        },
        translation_queren(){
          if(Math.abs(this.translation.point)>=1000){
            this.translation_modall2 = true
          }else {
            this.translation_save()
          }
        },
        //平移
        translation_save(){
          if(this.translation.command === undefined){
            this.translation.command = ''
          }
          if(isNumberAndNone(this.translation.point) && this.translation.point !=='' && this.translation.point !== 0 && this.translation.point !== '0'){
            let params ={
              client:this.clientSelected, //用户ID（用户名）
              contract:this.contractSelected,//合约名称
              command:this.translation.command,
              point:this.translation.point,
              translation_list:this.run_select_Ids.join(",")
            };
            translationAll(params).then(res=>{
              this.translation_modall2 =false;
              if(res !== ''){
                if(res.data.code === 1000){
                  this.run_select_Ids=[];
                  this.$Message.success('success');
                  this.get_ListStrategy2();
                  this.get_distributionEntrust();
                }else {
                  if(res.data.data.msg !==''){
                    this.$Message.error(res.data.data.msg);
                  }else {
                    this.$Message.error('error');
                  }
                }
              }
              this.translation.point = 0;
              this.translation_modall = false;
              this.set_run_select_Ids([]);
              if(res.status === 502){
                this.$Message.error("发生502，请核查平移");
                return;
              }
            }).catch(res=>{
              this.$Message.error("发生502，请核查平移");
              return;
            })
          }else {
            this.$Message.error('参数有误或平移点数为0');
          }
        },
        translation_cancel(){
          this.translation={
            command:'',
            point:0,
          }
        },
        //批量编辑
        batch_update_strategy(){
          let params ;
          if(this.batch_edit_strategy.stop_loss_type === undefined){
            this.batch_edit_strategy.stop_loss_type = ''
          }
          if(this.batch_edit_strategy.stop_profit_type === undefined){
            this.batch_edit_strategy.stop_profit_type = ''
          }
          if(this.batch_edit_strategy.stop_time_type === undefined){
            this.batch_edit_strategy.stop_time_type = ''
          }
          if(this.batch_edit_strategy.stop_loss_price_type === undefined){
            this.batch_edit_strategy.stop_loss_price_type = ''
          }
          if(this.batch_edit_strategy.stop_profit_price_type === undefined){
            this.batch_edit_strategy.stop_profit_price_type = ''
          }
          if(this.run_status){
            params ={
              list_strategy_id: this.run_select_Ids.join(","),
              stop_loss:this.batch_edit_strategy.stop_loss,
              stop_loss_type:this.batch_edit_strategy.stop_loss_type,
              stop_loss_price_type:this.batch_edit_strategy.stop_loss_price_type,
              stop_profit:this.batch_edit_strategy.stop_profit,
              stop_profit_type:this.batch_edit_strategy.stop_profit_type,
              stop_profit_price_type:this.batch_edit_strategy.stop_profit_price_type,
              stop_amount_cycle:this.batch_edit_strategy.stop_amount_cycle,
              stop_time_time_or_len:this.batch_edit_strategy.stop_time_time_or_len,
              stop_time:this.batch_edit_strategy.stop_time,
              stop_time_len:this.batch_edit_strategy.stop_time_len,
              stop_time_type:this.batch_edit_strategy.stop_time_type,
              group_id:this.batch_edit_strategy.group_id,
            };
          }else {
            params ={
              list_strategy_id: this.unrun_select_Ids.join(","),
              stop_loss:this.batch_edit_strategy.stop_loss,
              stop_loss_type:this.batch_edit_strategy.stop_loss_type,
              stop_loss_price_type:this.batch_edit_strategy.stop_loss_price_type,
              stop_profit:this.batch_edit_strategy.stop_profit,
              stop_profit_type:this.batch_edit_strategy.stop_profit_type,
              stop_profit_price_type:this.batch_edit_strategy.stop_profit_price_type,
              stop_amount_cycle:this.batch_edit_strategy.stop_amount_cycle,
              stop_time_time_or_len:this.batch_edit_strategy.stop_time_time_or_len,
              stop_time:this.batch_edit_strategy.stop_time,
              stop_time_len:this.batch_edit_strategy.stop_time_len,
              stop_time_type:this.batch_edit_strategy.stop_time_type,
              group_id:this.batch_edit_strategy.group_id,
            };
          }
          if(this.batch_edit_strategy.stop_time_time_or_len ==='None'){
            params.stop_time ='None';
            params.stop_time_len ='None'
          }else if(this.batch_edit_strategy.stop_time_time_or_len == 'time'){
            params.stop_time =this.batch_edit_strategy.stop_time.getTime();
            params.stop_time_len ='None'
          }else if(this.batch_edit_strategy.stop_time_time_or_len == 'len'){
            params.stop_time_len =this.batch_edit_strategy.stop_time_len;
            params.stop_time ='None'
          }
          updateStrategyBatch(params).then(res=>{
            this.batch_strategy_cancel();
            this.edit_translation_modall =false;
            this.run_select_Ids = [];
            this.unrun_select_Ids = [];
            if(res.status === 502){
              this.$Message.error("发生502，请核查批量编辑");
              return;
            }
            if(res.data.code === 1000){
              this.$Message.success('编辑成功');
              this.get_ListStrategy2();
              this.get_distributionEntrust();
            }else{
              this.$Message.error(res.data.data.msg);
              this.get_ListStrategy2();
              this.get_distributionEntrust();
            }
            this.set_run_select_Ids(this.run_select_Ids);
            this.set_unrun_select_Ids(this.unrun_select_Ids);
          }).catch(res=>{
            this.$Message.error("发生502，请核查批量编辑");
            return;
          })
        },
        //批量编辑退出
        batch_strategy_cancel(){
          this.batch_edit_strategy = {
            stop_amount_cycle:'',
            stop_len:'',
            stop_loss:'',
            stop_loss_type:'',
            stop_profit:'',
            stop_profit_type:'',
            stop_time:'',
            stop_time_len:'',
            stop_time_time_or_len:'',
            stop_time_type:'',
            strategy_status:'',
            strategy_type:'',
            volume:'',
            group_id:'',
          };
        },
        //获取委托分布图数据
        // get_distributionEntrust(){
        //   let params ={
        //     client:this.clientSelected, //用户ID（用户名）
        //     contract:this.contractSelected,//合约名称
        //   };
        //   distributionEntrust2(params).then(res=>{
        //     if(res.data.code === 1000){
        //       // this.$Message.success('成功获取委托分布图数据');
        //       this.strategy_data = res.data.data;
        //       this.myDraw();
        //     }else{
        //       // this.$Message.error(res.data.data.msg);
        //       myChart.clear();
        //     }
        //   })
        //     .catch((e) =>{
        //       myChart.clear();
        //       this.$Message.error("获取数据失败");
        //     })
        // },
        get_distributionEntrust(){
          let client = this.clientSelected; //用户ID（用户名）
          let contract = this.contractSelected;//合约名称
          this.getDistributionEntrustPro({client,contract}).then(res =>{
            this.strategy_data = this.get_strategy_data();
            if(this.strategy_data.length!== 0 ){
              this.myDraw();
            }else {
              myChart.clear();
            }
            console.log(res);
          }).catch(err =>{
            myChart.clear();
            console.log(err)
          })
        },
      },
      created(){
        if(this.get_client() != ''){
          this.clientSelected = this.get_client();
        }else {
          this.clientSelected = '';
        }
        if( this.get_contract() != ''){
          this.contractSelected = this.get_contract();
        }else{
          this.contractSelected = '';
        }
        this.run_select_Ids = this.get_run_select_Ids();
      },
      mounted(){
        this.$nextTick(function() {
          myChart = echarts.init(document.getElementById('strategy_draw'));
        });
      },
      computed:{
        computed_client(){   //vux要监听对象
          return this.get_client()
        },
        computed_contract(){
          return this.get_contract()
        },
        computed_run_select_Ids(){
          return this.get_run_select_Ids()
        },
        computed_unrun_select_Ids(){
          return this.get_unrun_select_Ids()
        },
        computed_run_status(){
          return this.get_run_status()
        },
        computed_strategy_data(){
          return this.get_strategy_data()
        },
        client_and_contract(){   //如果client和contract都发生改变执行
          const  { clientSelected,contractSelected} = this;
          return {
            clientSelected,
            contractSelected
          }
        },
      },
      watch:{
        computed_client(){
          this.clientSelected = this.get_client();
        },
        computed_contract(){
          this.contractSelected = this.get_contract()
        },
        computed_run_select_Ids(){
          this.run_select_Ids = this.get_run_select_Ids();
          this.myDraw();
          console.log(this.run_select_Ids)
        },
        computed_unrun_select_Ids(){
          this.unrun_select_Ids = this.get_unrun_select_Ids();
          console.log(this.unrun_select_Ids)
        },
        computed_run_status(){
          this.run_status = this.get_run_status();
        },
        client_and_contract(){ //获取到用户id和合约后执行的方法
          if(this.clientSelected !== '' && this.contractSelected !=='' ){
            if(this.isShow){
              this.get_distributionEntrust();
            }
          }
        },
        computed_strategy_data(){
          this.strategy_data = this.get_strategy_data();
          if(this.strategy_data.length!== 0 ){
            this.myDraw();
          }else{
            myChart.clear();
          }
        },
      },
      beforeDestroy () {
        myChart.clear()
        this.stopDistributionEntrust();
      },
    }
</script>


<style scoped lang="less">
  .strategy_sidebar{
    float: right;
    right: 61px;
    top: 26%;
    position: fixed;
    button{
      /*cursor: pointer;*/
    }
    .drawer {
      transition: all 0.3s;
      display: flex;
      .drawer_r{
        position: absolute;
        top: 300px;
        .ico_open{
          width: 63px;
          height: 131px;
          cursor: pointer;
        }
        .ico_close{
          width: 63px;
          height: 131px;
          cursor: pointer;
        }
      }
      .drawer_l{
        width: 373px;
        height: 745px;
        background: #1B2039;
        position: absolute;
        left: 61px;
        .drawer_l_h{
          height: 100px;
          .drawer_db{
            button{
              margin-top: 16px;
              width: 120px;
              height: 32px;
              margin-left: 10px;
              border: 1px solid #60B5FF;
              border-radius: 2px;
              font-size: 14px;
              color: #60B5FF;
              letter-spacing: 0;
              text-align: center;
              background-color:transparent;
            }
            button:nth-child(1)
            {
              margin-top: 16px;
              margin-left: 66px;
            }
          }
        }
        .drawer_l_m{
          width: 373px;
          height: 590px;
          background-color: #1B2039;
        }
      }
    }
    .show {
      transform: translateX(-370px);
    }
    .hidden {
      transform: translateX(100%);
    }
  }
</style>
